<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid"></canvas>
		<script>
			window.onload = function() {
				function du(e) {
					return e * Math.PI / 180
				}
				var canvas = document.getElementById("canvas")
				var cxt = canvas.getContext("2d")
				canvas.width = 800;
				canvas.height = 500;

				cxt.lineWidth = 3

				canvasx = canvas.getBoundingClientRect().left //返回canvas距离左边的距离
				canvasy = canvas.getBoundingClientRect().top //返回canvas距离上边的距离
				var startx;
				var starty;

				canvas.addEventListener("mousedown", downfun);

				function downfun(e) {
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;
					console.log(startx + ', ' + starty)
				}



				//基底
				cxt.beginPath()
				cxt.fillStyle = '#FBBA17'
				cxt.fillRect(20, 20, 200, 200)
				cxt.fillStyle = 'white'
				cxt.arc(120, 120, 80, 0, du(360))
				cxt.fill()
				cxt.closePath()

				//右眼
				cxt.beginPath()
				cxt.fillStyle = '#FBBA17'
				cxt.arc(140, 100, 12, 0, du(360))
				cxt.fill()
				cxt.closePath()

				//左眼
				cxt.beginPath()
				cxt.arc(98, 94, 14, 0, du(180))
				cxt.strokeStyle = '#FBBA17'
				cxt.stroke()
				cxt.closePath()

				//嘴
				cxt.beginPath()
				cxt.arc(120, 120, 50, du(20), du(160))
				cxt.stroke()




				//基底
				cxt.beginPath()
				cxt.fillStyle = '#E36814'
				cxt.fillRect(240, 20, 200, 200)
				cxt.fillStyle = 'white'
				cxt.arc(340, 120, 80, 0, du(360))
				cxt.fill()
				cxt.closePath()

				//右眼
				cxt.beginPath()
				cxt.fillStyle = '#E36814'
				cxt.arc(360, 106, 12, 0, du(360))
				cxt.fill()
				cxt.closePath()

				cxt.beginPath()
				cxt.moveTo(348, 100)
				cxt.lineTo(373, 86)
				cxt.strokeStyle = '#E36814'
				cxt.stroke()
				cxt.closePath()

				//左眼
				cxt.beginPath()
				cxt.arc(318, 106, 12, 0, du(360))
				cxt.strokeStyle = '#E36814'
				cxt.fill()
				cxt.closePath()

				cxt.beginPath()
				cxt.moveTo(332, 100)
				cxt.lineTo(307, 86)
				cxt.strokeStyle = '#E36814'
				cxt.stroke()
				cxt.closePath()

				//嘴
				cxt.beginPath()
				cxt.arc(340, 190, 50, du(-40), du(-140), true)
				cxt.stroke()
				cxt.closePath()



				//基底
				cxt.beginPath()
				cxt.fillStyle = '#FA2822'
				cxt.fillRect(460, 20, 200, 200)
				cxt.fillStyle = 'white'
				cxt.arc(560, 120, 80, 0, du(360))
				cxt.fill()
				cxt.closePath()

				//右眼
				cxt.beginPath()
				cxt.fillStyle = '#FA2822'
				cxt.arc(580, 108, 16, 0, du(360))
				cxt.fill()
				cxt.closePath()

				//左眼
				cxt.beginPath()
				cxt.arc(538, 106, 12, 0, du(360))
				cxt.strokeStyle = '#FA2822'
				cxt.fill()
				cxt.closePath()

				//嘴
				cxt.beginPath();
				cxt.moveTo(508, 150);
				cxt.bezierCurveTo(558, 110, 558, 190, 608, 150);
				cxt.stroke();
				cxt.closePath();
				
				
				
				//基底
				cxt.beginPath()
				cxt.fillStyle = '#D520E6'
				cxt.fillRect(20, 240, 200, 200)
				cxt.fillStyle = 'white'
				cxt.arc(120, 340, 80, 0, du(360))
				cxt.fill()
				cxt.closePath()
				
				//右眼
				cxt.beginPath()
				cxt.arc(140, 320, 12, 0, du(180), true)
				cxt.strokeStyle = '#D520E6'
				cxt.stroke()
				cxt.closePath()

				//左眼
				cxt.beginPath()
				cxt.arc(100, 320, 12, 0, du(180), true)	
				cxt.strokeStyle = '#D520E6'
				cxt.stroke()
				cxt.closePath()
				
				//嘴
				cxt.beginPath()
				cxt.fillStyle = '#D520E6'
				cxt.arc(120, 340, 50, 0, du(180))
				cxt.fill()
				cxt.closePath()
				
				//基底
				cxt.beginPath()
				cxt.fillStyle = 'rgb(220, 41,17)'
				cxt.fillRect(240, 240, 200, 200)
				cxt.closePath()
				
				//镰刃
				cxt.beginPath()
				cxt.arc(315, 315, 60, du(-50), du(140))
				cxt.lineWidth = 20
				cxt.strokeStyle = 'rgb(252, 227, 0)'
				cxt.stroke()
				cxt.closePath()
				
				cxt.beginPath()
				cxt.arc(315, 305, 61, 0, du(360))
				cxt.fillStyle = 'rgb(220, 41,17)'
//				cxt.fillStyle = 'white'
				cxt.fill()
				
				//镰柄
				cxt.beginPath()
				cxt.arc(270, 380, 10, 0, du(360))
				cxt.fillStyle = 'rgb(252, 227, 0)'
				cxt.fill()
				cxt.closePath()
				
				//锤头rgb(252, 227, 0)
				cxt.beginPath()
				cxt.moveTo(270, 310)
				cxt.lineTo(320, 260)
				cxt.lineTo(340, 280)
				cxt.lineTo(290, 330)
				cxt.fillStyle = 'rgb(252, 227, 0)'
				cxt.fill()
				cxt.closePath()
				
				cxt.beginPath()
				cxt.arc(320, 260, 15, 0, du(360))
				cxt.fillStyle = 'rgb(220, 41,17)'
				cxt.fill()
				cxt.closePath()
				
				//锤柄
				cxt.beginPath()
				cxt.moveTo(285, 295)
				cxt.lineTo(300, 280)
				cxt.lineTo(390, 370)
				cxt.lineTo(375, 385)
				cxt.fillStyle = 'rgb(252, 227, 0)'
				cxt.fill()
				cxt.closePath()
				
				//基底
				cxt.beginPath()
				cxt.fillStyle = '#ddd'
				cxt.fillRect(460, 240, 200, 200)
				cxt.closePath()
				
				//耳朵
				cxt.beginPath()
				cxt.arc(500, 280, 25, 0, du(360))
				cxt.fillStyle = 'black'
				cxt.fill()
				cxt.closePath()
				
				cxt.beginPath()
				cxt.arc(630, 280, 25, 0, du(360))
				cxt.fillStyle = 'black'
				cxt.fill()
				cxt.closePath()

				//脸
				cxt.beginPath()
				cxt.moveTo(487, 320);
				cxt.bezierCurveTo(487, 240, 639, 240, 639, 320);
				cxt.moveTo(639, 320);
				cxt.bezierCurveTo(639, 400, 487, 400, 487, 320);
				cxt.fillStyle = 'white'
				cxt.fill()
				cxt.closePath()
				
				//鼻
				cxt.beginPath()
				cxt.moveTo(550, 315);
				cxt.bezierCurveTo(550, 305, 570, 305, 570, 315);
				cxt.moveTo(570, 315);
				cxt.bezierCurveTo(570, 325, 550, 325, 550, 315);
				cxt.fillStyle = 'black'
				cxt.fill()
				cxt.closePath()
				
				//眼
				cxt.beginPath()
				cxt.moveTo(539, 297);
				cxt.bezierCurveTo(529, 294, 512, 313, 524, 321);
				cxt.moveTo(524, 321);
				cxt.bezierCurveTo(534, 326, 547, 304, 539, 297);
				cxt.fillStyle = 'black'
				cxt.fill()
				cxt.closePath()
				
				cxt.beginPath()
				cxt.moveTo(539, 297);
				cxt.bezierCurveTo(529, 294, 512, 313, 524, 321);
				cxt.moveTo(524, 321);
				cxt.bezierCurveTo(534, 326, 547, 304, 539, 297);
				cxt.fillStyle = 'black'
				cxt.fill()
				cxt.closePath()
			}
		</script>
	</body>

</html>